<template>
  <div class="contents">
    <PanelTitle title="用户分析" />
    <div class="mt">
      <div class="infoPanel">
        <div>
          <div class="infoTitle">注册人数</div>
          <div class="infoNumss">
            <span class="infoNum">{{ userData.userTotalNum }}</span>
            <span class="infoUnit">人</span>
          </div>
          <!-- <div class="infoSub">同比 10.00%</div> -->
        </div>
        <div>
          <div class="infoTitle">在线人数</div>
          <div class="infoNumss">
            <span class="infoNum">{{ userData.onlineNum }}</span>
            <span class="infoUnit">人</span>
          </div>
          <!-- <div class="infoSub">同比 10.00%</div> -->
        </div>
        <div>
          <div class="infoTitle">最大在线人数</div>
          <div class="infoNumss">
            <span class="infoNum">{{ userData.maxOnlineNum }}</span>
            <span class="infoUnit">人</span>
          </div>
          <!-- <div class="infoSub">同比 10.00%</div> -->
        </div>
        <div>
          <div class="infoTitle">用户留存率</div>
          <div class="infoNumss">
            <span class="infoNum">{{ userData.retention }}</span>
            <span class="infoUnit">%</span>
          </div>
          <!-- <div class="infoSub">同比 10.00%</div> -->
        </div>
      </div>
      <div class="twomaps">
        <div>
          <div class="tabs">
            <div>性别分布</div>
          </div>
          <div ref="leftmap" class="leftmap"></div>
        </div>
        <div>
          <div class="tabs">
            <div>年龄分布</div>
          </div>
          <div ref="rightmap" class="rightmap"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";


const leftmap = ref(null);
const rightmap = ref(null);
let userData = ref({});

onMounted(async () => {
  let ress = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/farming/user/login/record/online/statist",
    method: "get",
  });
  userData.value = ress.data;

  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/farming/user/distribution/statist",
    method: "get",
  });

  let letPieData = [
    {
      value: res.data.maleNum,
      name: "男",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: "#FCC640" },
          { offset: 1, color: "#F8E48F" },
        ]),
      },
    },
    {
      value: res.data.femaleNum,
      name: "女",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: "rgba(8, 194, 174, 1)" },
          { offset: 1, color: "rgba(1, 208, 161, 1)" },
        ]),
      },
    },
  ];

  let rightPieData = [
    {
      value: res.data.lt25Num,
      name: "25以下",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: "rgba(26, 119, 254, 1)" },
          { offset: 1, color: "rgba(93, 202, 248, 1)" },
        ]),
      },
    },
    {
      value: res.data.from25To35Num,
      name: "25-35",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: "rgba(254, 117, 169, 1)" },
          { offset: 1, color: "rgba(237, 102, 102, 1)" },
        ]),
      },
    },
    {
      value: res.data.from35To50Num,
      name: "35-50",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: "rgba(8, 194, 174, 1)" },
          { offset: 1, color: "rgba(1, 208, 161, 1)" },
        ]),
      },
    },
    {
      value: res.data.from50To65Num,
      name: "50-65",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: "rgba(252, 198, 64, 1)" },
          { offset: 1, color: "rgba(248, 228, 143, 1)" },
        ]),
      },
    },
    {
      value: res.data.gt65Num,
      name: "65以上",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: "rgba(180, 117, 254, 1)" },
          { offset: 1, color: "rgba(212, 168, 252, 1)" },
        ]),
      },
    },
  ];

  var leftmaps = echarts.init(leftmap.value);
  leftmaps.setOption({
    tooltip: {
      show: true,
      trigger: "item",
    },
    legend: {
      left: "left",
      icon: "circle",
      itemHeight: fitChartSize(7),
      itemWidth: fitChartSize(7),
      top: "bottom",
      left: "center",
      data: ["男", "女"],
      textStyle: {
        fontSize: fitChartSize(10),
        color: "#fff",
      },
    },
    // color: ["#D4A8FC", "#00FCFF", "#1DC0DE", "#08EE8A", "#2871B5"],
    series: [
      {
        name: "外边框",
        type: "pie",
        clockWise: false,
        radius: [fitChartSize(30), fitChartSize(55)], //边框大小
        center: ["50%", "45%"], //边框位置
        silent: true,
        itemStyle: {
          normal: {
            color: "rgba(44, 215, 255, .2)",
          },
        },
        labelLine: {
          normal: {
            length: fitChartSize(45),
            length2: fitChartSize(45),
            show: false, // 隐藏所有指示线
          },
        },
        data: [
          {
            value: 0,
          },
        ],
      },
      {
        type: "pie",
        radius: [fitChartSize(35), fitChartSize(50)],
        center: ["50%", "45%"],
        itemStyle: {
          // borderRadius: 5,
        },
        labelLine: {
          length: fitChartSize(5),
          length2: fitChartSize(30),
          lineStyle: {
            color: "#2CD7FF",
          },
        },
        labelLayout: {
          verticalAlign: "bottom",
          align: "center",
          // width: fitChartSize(90),
          // dy: fitChartSize(-4),
          // dx: -40,
        },
        label: {
          show: true,
          labelLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          normal: {
            formatter: function (e) {
              return `{a|${e.data.name}}`;
              // ：${e.data.value}%
            },
            rich: {
              a: {
                color: "#2AD0B7",
                lineHeight: fitChartSize(18),
                fontSize: fitChartSize(10),
                align: "left",
              },
            },
          },
        },
        data: letPieData,
      },
    ],
  });

  var rightmaps = echarts.init(rightmap.value);
  rightmaps.setOption({
    tooltip: {
      show: true,
      trigger: "item",
    },
    legend: {
      left: "left",
      icon: "circle",
      itemHeight: fitChartSize(7),
      itemWidth: fitChartSize(7),
      top: "bottom",
      left: "center",
      data: ["25以下", "25-35", "35-50", "50-65", "65以上"],
      textStyle: {
        fontSize: fitChartSize(9),
        color: "#fff",
      },
    },
    // color: ["#D4A8FC", "#00FCFF", "#1DC0DE", "#08EE8A", "#2871B5"],
    series: [
      {
        name: "外边框",
        type: "pie",
        clockWise: false,
        radius: [fitChartSize(30), fitChartSize(55)], //边框大小
        center: ["50%", "45%"], //边框位置
        silent: true,
        itemStyle: {
          normal: {
            color: "rgba(44, 215, 255, .2)",
          },
        },
        labelLine: {
          normal: {
            length: fitChartSize(45),
            length2: fitChartSize(45),
            show: false, // 隐藏所有指示线
          },
        },
        data: [
          {
            value: 0,
          },
        ],
      },
      {
        type: "pie",
        radius: [fitChartSize(35), fitChartSize(50)],
        center: ["50%", "45%"],
        itemStyle: {
          // borderRadius: 5,
        },
        labelLine: {
          // length: fitChartSize(20),
          // length2: fitChartSize(30),
          lineStyle: {
            color: "#2CD7FF",
          },
        },
        labelLayout: {
          verticalAlign: "bottom",
          align: "center",
          // width: fitChartSize(90),
          // dy: fitChartSize(-4),
          // dx: fitChartSize(-40),
        },
        label: {
          show: true,
          labelLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          normal: {
            formatter: function (e) {
              return `{a|${e.data.name}}`;
              // ：${e.data.value}%}
            },
            rich: {
              a: {
                color: "#2AD0B7",
                lineHeight: fitChartSize(18),
                fontSize: fitChartSize(9),
                align: "left",
              },
            },
          },
        },
        data: rightPieData,
      },
    ],
  });
});
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(
    to bottom,
    rgba(5, 79, 99),
    rgba(5, 79, 99, 0.1),
    rgba(5, 79, 99)
  );
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);
  .mt {
    margin-top: vh(-40);
  }
}
.infoPanel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: vh(10) vw(15) 0px;

  > div {
    box-sizing: border-box;
    width: vw(160);
    height: vh(80);
    background: rgba(9, 36, 44, 0.4);
    border: vh(1) solid #43e7ff;
    padding: 0 vw(20) 0px;
    margin-bottom: vh(12);
  }
  .infoTitle {
    color: #fff;
    font-size: vh(10);
    line-height: vh(30);
  }
  .infoNums {
    line-height: vh(20);
  }
  .infoNumss {
    line-height: vh(36);
  }
  .infoNum {
    color: #adffd7;
    font-size: vh(26);
    font: SourceHanSansCN-Bold;
  }
  .infoUnit {
    color: #adffd7;
    font-size: vh(16);
    font: SourceHanSansCN-Bold;
    margin-left: vw(4);
  }
  .infoSub {
    font-weight: 400;
    font-size: vh(10);
    color: #adffd7;
    line-height: vh(20);
  }
}
.twomaps {
  display: flex;
  > div {
    width: 50%;
  }
  .tabs {
    width: vw(50);
    height: vh(18);
    line-height: vh(18);
    padding: 0 vw(2);
    background: rgba(8, 35, 53, 0.5);
    border-radius: vh(10);
    text-align: center;
    margin: 0 auto;
  }
  .tabs > div {
    height: 100%;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: vh(10);

    background: linear-gradient(0deg, #7ae3ff 0%, #ffffff 60%);
    color: transparent;
    -webkit-background-clip: text;
  }
  .leftmap {
    width: 100%;
    height: vh(210);
  }
  .rightmap {
    width: 100%;
    height: vh(210);
  }
}
</style>